import React from "react";
import { useSelector, useDispatch } from "react-redux";
import Child from "./Child";

const App = () => {
  // const count = useSelector((state) => state.count);
  const count = useSelector((state) => state.get("count"));
  const dispatch = useDispatch();

  const add = () => {
    // 当组件里面进行dispatch调用的时候
    // 优先去找mySaga函数里面有没有这个type的值
    // 如果有type的值，就会去执行mySaga后面的回调函数
    // 如果没有type的值，会去直接调用reducer函数
    dispatch({ type: "asyncAdd" });
  };

  const minus = () => {
    dispatch({ type: "minus", n: 3 });
  };

  return (
    <div>
      <h2>redux-immutable</h2>
      <button onClick={minus}>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <hr />

      <Child />
    </div>
  );
};

export default App;
